<template>
  <div>
    <el-dialog
      title="新增租户"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeAddDialog"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refAddForm"
        label-width="80px"
      >
        <!-- <el-alert
          title="租户新增成功后会默认生成未设置密码的租户账号，登录可采用短信验证的方式登录"
          type="warning"
          center
          show-icon
          style="margin-bottom: 10px;"
        >
        </el-alert> -->
        <el-form-item size="small" label="租户名称" prop="name">
          <el-input
            clearable
            v-model.trim="addForm.name"
            placeholder="请输入"
            maxlength="20"
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="用户名" prop="username">
          <el-input
            clearable
            v-model.trim="addForm.username"
            placeholder="请输入"
            maxlength="10"
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="手机号" prop="mobile">
          <el-input
            clearable
            v-model.trim="addForm.mobile"
            placeholder="请输入"
            maxlength="11"
            style="width: 360px"
            oninput="value=value.replace(/\D/g,'')"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="有效期" prop="timeData">
          <!-- <el-date-picker  v-model="timeData" type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss" align="center" start-placeholder="开始时间" range-separator="至"
            end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" style="width: 360px" :clearable="false" unlink-panels>
          </el-date-picker> -->

          <el-date-picker
            style="width: 360px"
            :picker-options="forbiddenTime"
            v-model="addForm.timeData"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="data-pick"
            unlink-panels
          ></el-date-picker>
        </el-form-item>

        <!-- <el-form-item size="small" label="机构属性" prop="type">
          <div style="display: flex; align-items: center">
            <el-select
              clearable
              v-model="addForm.type"
              style="width: 330px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
            <el-tooltip
              class="item"
              effect="dark"
              content="当上级机构属性为联网单位时，其下级机构的属性选择仅限于联网单位！"
              placement="bottom"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </el-form-item> -->

        <el-form-item size="small" label="邮箱" prop="email">
          <el-input
            clearable
            v-model.trim="addForm.email"
            placeholder="请输入"
            maxlength="40"
            style="width: 360px"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="地址" prop="address">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入"
            v-model="addForm.address"
            maxlength="50"
            resize="none"
            style="width: 360px"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="简介" prop="remarks">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入"
            v-model="addForm.remarks"
            maxlength="50"
            resize="none"
            style="width: 360px"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item size="small">
          <div>
            <span
              >温馨提示：租户新增成功后会默认生成未设置密码的租户账号，登录可采用短信验证的方式登录</span
            >
          </div>
        </el-form-item> -->
        <!-- <div style="font-size: 12px; margin-left: 40px">
          温馨提示：租户新增成功后会默认生成未设置密码的租户账号，登录可采用短信验证的方式登录
        </div> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="confirm-button"
          @click="addSubmit"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqTenantAdd } from "@api/api";
import rulesMixin from "../mixins/rules.js";
export default {
  mixins: [rulesMixin],
  data() {
    return {
      forbiddenTime: {
        //禁用当前日期之前的日期
        disabledDate(time) {
          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      dialogVisible: false,
      addForm: {
        name: "",
        // time: ["2022-12-13 10:10:10", "2024-12-13 10:10:10"],
        // time: [],
        email: "",
        address: "",
        remarks: "",
        username: "",
        mobile: "",
        timeData: [], //默认一年
        // type: "",
      },
      typeList: [
        {
          id: 1,
          name: "联网单位",
        },
        // {
        //   id: 2,
        //   name: "维保单位",
        // },
        {
          id: 3,
          name: "监管单位",
        },
        // {
        //   id: 4,
        //   name: "经销商",
        // },
        // {
        //   id: 5,
        //   name: "工程商",
        // },
        // {
        //   id: 6,
        //   name: "代理商",
        // },
      ],
    };
  },
  methods: {
    // 点击新增
    addSubmit() {
      this.$refs.refAddForm.validate(async (valid) => {
        if (!valid) return;
        let params = {
          name: this.addForm.name,
          fromTime: this.addForm.timeData[0],
          toTime: this.addForm.timeData[1],
          email: this.addForm.email,
          address: this.addForm.address,
          remarks: this.addForm.remarks,
          username: this.addForm.username,
          mobile: this.addForm.mobile,
          // type: this.addForm.type,
        };
        const res = await reqTenantAdd(params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("新增租户成功");
        this.$refs.refAddForm.resetFields();
        this.dialogVisible = false;
        this.$parent.getInitDataList(); //更新租户列表
        this.$alert(
          "租户账号创建成功,账号可通过手机短信验证码登录",
          "温馨提示",
          {
            confirmButtonText: "确定",
            type: "success",
            callback: (action) => {},
          }
        );
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.refAddForm.resetFields();
      this.dialogVisible = false;
    },
    /* 获取过去时间，并传值给现在时间 */
    getPassYearFormatDate() {
      var nowDate = new Date();
      var date = new Date(nowDate);
      date.setDate(date.getDate() + 365); // date.setDate(date.getDate() - 365);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var formatDate = year + seperator1 + month + seperator1 + strDate;
      this.getNowFormatDate(formatDate);
    },
    /* 获取现在时间，并接受过去时间的值 */
    getNowFormatDate(formatDate) {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var nowData = year + seperator1 + month + seperator1 + strDate;
      this.addForm.timeData = [nowData + " 00:00:00", formatDate + " 00:00:00"]; // 默认赋值一年时间
    },
  },
  mounted() {
    this.getPassYearFormatDate();
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  color: @primaryContentTxt !important;
}

.el-icon-question {
  margin-left: 10px;
  color: #7367f0;
  cursor: pointer;
  font-size: 20px;
}
</style>
